<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>系统管理-讲师列表</title>
    <link th:href="@{/c/base.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/c/toefl.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/c/bootstrap.min.css}" rel="stylesheet" type="text/css">
    <script type="text/javascript" th:src="@{/j/jquery-2.1.0.js}"></script>
    <script type="text/javascript" th:src="@{/j/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/j/lrtk.js}"></script>
    <script th:src="@{/webjars/vue/2.6.12/vue.js}" type="text/javascript"></script>
    <script type="text/javascript" th:src="@{/webjars/axios/0.21.1/dist/axios.js}"></script>
    <script th:src="@{/js/pagination.js}" type="text/javascript"></script>
    <link th:href="@{/css/pagination.css}" type="text/css" rel="stylesheet">
</head>

<body>
<div id="app">
    <div class="doc1180 paddingT20 fn-clear container">
        <div>
            <form class="form-inline">
                <div class="form-group">
                    <label for="exampleInputName2">用户名</label>
                    <input type="text" class="form-control" id="exampleInputName2" v-model="username" placeholder="请输入用户名">
                </div>

                <button type="button" class="btn btn-primary" @click="loadList(1,5)">搜索</button>
            </form>
        </div>
        <div class="myPost_Theme" style="height: 80vh;margin-top: 50px;">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="myPost_Table">
                <tr class="myPost_Th">
                    <th><input type="checkbox" name="" id="" value=""/></th>
                    <th>头像</th>
                    <th>教师姓名</th>
                    <th>性别</th>
                    <th>邮箱</th>
                    <th>电话</th>
                    <th>出生日期</th>
                    <th>创建时间</th>
                    <th>课程资源</th>
                    <th>状态</th>
                </tr>
                <tr v-for="teacher in teacherList">
                    <td><input type="checkbox" name="" id="" value=""/></td>
                    <td class="myPost_ThemeTitle"><img src="../i/30x30.png"></td>
                    <td>
                        <a style="color: red;" href="../个人资料/普通用户-首页.html">{{teacher.realName}}</a>
                    </td>
                    <td>
                        {{teacher.sex}}
                    </td>
                    <td>{{teacher.email}}</td>
                    <td>{{teacher.phoneNumber}}</td>
                    <td>{{teacher.birthday}}</td>
                    <td>{{teacher.registrationTime}}</td>
                    <td>
                        <button class="btn btn-primary" type="button">
                            文章 <span class="badge">{{teacher.articles.length}}</span>
                        </button>
                        <button class="btn btn-warning" type="button">
                            课程 <span class="badge">{{teacher.welfareCastles.length}}</span>
                        </button>
                    </td>
                    <td>{{teacher.status==1?'正常':'冷冻'}}</td>
                </tr>
            </table>
            <div style="margin-top: 40px;width: 400px; float: left;">
                <a href="#" class="btn btn-success" data-toggle="modal" data-target=".modal">创建</a>
                <a href="#" class="btn btn-warning" data-toggle="modal" data-target=".modal">冷冻</a>
                <a href="#" class="btn btn-primary" data-toggle="modal" data-target=".modal">解冻</a>
                <a href="#" class="btn btn-danger">删除</a>
            </div>
            <div id="pages"></div>
        </div>
    </div>
    <!--表单元素-->
    <div class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">连接信息</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label>用户名</label>
                            <input type="text" class="form-control" placeholder="名称">
                        </div>
                        <div class="form-group">
                            <label>真实姓名</label>
                            <input type="text" class="form-control" placeholder="真实姓名">
                        </div>
                        <div class="form-group">
                            <label>性别</label>
                            <select class="form-control">
                                <option>男</option>
                                <option>女</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>学历</label>
                            <select class="form-control">
                                <option>本科</option>
                                <option>专科</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>邮箱</label>
                            <input type="email" class="form-control" placeholder="email">
                        </div>
                        <div class="form-group">
                            <label>电话</label>
                            <input type="text" class="form-control" placeholder="电话">
                        </div>
                        <div class="form-group">
                            <label>生日</label>
                            <input type="datetime" class="form-control" placeholder="">
                        </div>
                        <div class="form-group">
                            <label>自我介绍</label>
                            <textarea name="" rows="5" cols="" class="form-control">
                                    2019年购买连接信息
                                </textarea>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</div>
<!-- /.modal -->
<!-- 代码结束 -->
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            teacherList:[],
            username:""
        },
        methods:{
            loadList:function(page,size){
                axios.get("http://localhost:9527/adminTeacher/teacherList",{
                    params:{
                        username:this.username,
                        "page":page,
                        "size":size
                    }
                }).then(function (response) {
                    vue.teacherList = response.data.list;
                    new Pagination({
                        element: '#pages',
                        type: 1,
                        pageIndex: response.data.pageNum,
                        pageSize: response.data.pageSize,
                        pageCount: 5,
                        total: response.data.total,
                        jumper: true,
                        singlePageHide: false,
                        prevText: '上一页',
                        nextText: '下一页',
                        disabled: true,
                        currentChange: function (index) {
                            vue.loadList(index, response.data.pageSize),
                            pageIndex = index;
                            // console.log(index);
                        }
                    })
                }).catch(function (error) {
                    console.log(error)
                })
            },

        },
        mounted:function(){
            axios.get("http://localhost:9527/adminTeacher/teacherList").then(function (response) {
                vue.teacherList = response.data.list;
                console.log(response.data);
                new Pagination({
                    element: '#pages',
                    type: 1,
                    pageIndex: response.data.pageNum,
                    pageSize: response.data.pageSize,
                    pageCount: 5,
                    total: response.data.total,
                    jumper: true,
                    singlePageHide: false,
                    prevText: '上一页',
                    nextText: '下一页',
                    disabled: true,
                    currentChange: function (index) {
                        vue.loadList(index,5);
                        pageIndex = index
                        // console.log(index);
                    }
                })
            }).catch(function (error) {
                console.log(error)
            })
        }
    })
</script>
</body>

</html>